import React, { lazy, Suspense } from 'react'

// import Home from './views/Home'
// import Search from './views/Search'
// import Profile from './views/Profile'

const Home = lazy(() => import('./views/Home'))
const Search = lazy(() => import('./views/Search'))
const Profile = lazy(() => import('./views/Profile'))

export default function Main({ tabName }) {
  return (
    <Suspense fallback={<div>loading.................</div>}>
      <div>
        {
          tabName === 'home' && <Home></Home>
        }
        {
          tabName === 'search' && <Search></Search>
        }
        {
          tabName === 'profile' && <Profile></Profile>
        }
      </div>
    </Suspense>
  )
}
